.box {
	height: 100%;
	overflow-y: auto;

	.swiper {
		width: 100%;
		height: 182px;
		// background: url(../../assets/images/index-swiper-bg1.jpg) no-repeat
		// 	center/cover;
		.slide1 {
			background: url(../../assets/images/index-swiper-bg1.jpg) no-repeat
				center/cover;
		}
		.slide2 {
			background: url(../../assets/images/index-swiper-bg2.jpg) no-repeat
				center/cover;
		}
		.slide3 {
			background: url(../../assets/images/index-swiper-bg3.jpg) no-repeat
				center/cover;
		}
	}

	.main {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 17px 13px 14px;

		div {
			border-radius: 10px;
			margin-bottom: 18px;
			font-size: 14px;
			color: #fff;
			padding: 12px 0 0 12px;
			font-weight: bold;
			position: relative;
		}

		.ranking {
			width: 136px;
			height: 137px;
			background: #54afda url(../../assets/images/index-card-rank.png) no-repeat -10px
				25px;
			background-size: 100px;
			color: #0d4e74;

			span {
				position: absolute;
				right: 14px;
				bottom: 18px;
				color: #fff;
				font-size: 54px;
			}
		}

		.clockIn {
			color: #0d4e74;
			width: 194px;
			height: 137px;
			background: #9fd9f8 url(../../assets/images/index-card-sum.png) no-repeat
				10px 25px;
			background-size: 100px;

			.clockBtn {
				position: absolute;
				right: 14px;
				bottom: 18px;
				font-size: 14px;
				width: 92px;
				height: 36px;
				line-height: 36px;
				text-align: center;
				border-radius: 18px;
				border: 2px solid #0d4e74;
			}
		}

		.sport {
			width: 163px;
			height: 100px;
			background: url(../../assets/images/index-card-data.png) no-repeat
				center/cover;
		}

		.badge {
			color: #0d4e74;
			width: 168px;
			height: 100px;
			background: #9dbde3 url(../../assets/images/index-card-badge.png)
				no-repeat 10px 10px;
			background-size: 100px;

			span {
				position: absolute;
				right: 14px;
				bottom: 0px;
				font-size: 14px;

				strong {
					font-size: 54px;
				}
			}
		}

		.train {
			width: 349px;
			height: 100px;
			background: url(../../assets/images/course-img04.jpg) no-repeat 0px -20px /
				cover;
		}

		.run {
			width: 349px;
			height: 100px;
			background: url(../../assets/images/course-img02.png) no-repeat 0px -10px /
				cover;
			margin-bottom: 0;
		}
	}

	.hold {
		height: 66px;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: -1px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		height: 66px;
		box-shadow: 0 -3px 3px #e0e0e0;
		background: #fff;

		a {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #8b8b8b;

			i {
				font-size: 36px;
			}
			span {
				font-size: 12px;
			}
		}

		a.active {
			color: #4a98ff;
		}
	}
}

.box::-webkit-scrollbar {
	display: none;
}
